import DrawerFooter from '@/components/DrawerFooter';
import TauSimpleSelect from '@/components/TauSimpleSelect';
import { useStore } from '@/hooks';
import { Button, Form, Checkbox } from '@alifd/next';
import { t } from '@lingui/macro';
import { observable } from 'mobx';
import { observer } from 'mobx-react-lite';
import React, { useEffect, useState } from 'react';

const FormItem = Form.Item;

function ChargeForm({ data, onSubmit, onCancel }) {
  const [line] = useState(() => observable({}));
  const { scRelevancyStore: store } = useStore();
  const { fromCities, toCities, onStations, offStations } = toJS(store);
  const [schedule, setSchedule] = useState([]);

  useEffect(() => {
    _.assign(line, data);
    (async () => {
      const { onCityId, offCityId, onStationId } = data;
      await store.getToCity({ fromCity: onCityId });
      await store.getOnStations({ priceType: '2', direction: '0', fromCities: [onCityId], toCities: [offCityId] });
      await store.getOffStations({ priceType: '2', direction: '1', fromCities: [onCityId], toCities: [offCityId], fromStation: onStationId });
      const res = await store.getScheduleList(toJS(data));
      setSchedule(() => res);
    })();
  }, []);

  const handleChange = async (__, values, ___) => {
    const { name, value } = values;
    _.set(line, name, value);
    if (name === 'onCityId') {
      const onCityName = values.field.fieldsMeta[name].inputValues[2]?.label;
      await store.getToCity({ fromCity: value });
      _.set(line, 'onCityName', onCityName);
      _.set(line, 'offCityId', '');
      _.set(line, 'offCityName', '');
      _.set(line, 'onStationId', '');
      _.set(line, 'onStationName', '');
      _.set(line, 'offStationId', '');
      _.set(line, 'offStationName', '');
      setSchedule([]);
    }
    if (name === 'offCityId') {
      const { onCityId } = toJS(line);
      const offCityName = values.field.fieldsMeta[name].inputValues[2]?.label;
      _.set(line, 'offCityName', offCityName);
      _.set(line, 'onStationId', '');
      _.set(line, 'onStationName', '');
      _.set(line, 'offStationId', '');
      _.set(line, 'offStationName', '');
      setSchedule([]);
      await store.getOnStations({ priceType: '2', direction: '0', fromCities: [onCityId], toCities: [value] });
    }
    if (name === 'onStationId') {
      const { onCityId, offCityId } = toJS(line);
      const onStationName = values.field.fieldsMeta['onStationId'].inputValues[2]?.label;
      _.set(line, 'onStationName', onStationName);
      _.set(line, 'offStationId', '');
      _.set(line, 'offStationName', '');
      setSchedule([]);
      await store.getOffStations({ priceType: '2', direction: '1', fromCities: [onCityId], toCities: [offCityId], fromStation: value });
    }
    if (name === 'offStationId') {
      const offStationName = values.field.fieldsMeta['offStationId'].inputValues[2]?.label;
      _.set(line, 'offStationName', offStationName);
      const res = await store.getScheduleList(toJS(line));
      setSchedule(() => res);
    }
  };

  const handleOnSubmit = (v, e) => {
    if (!_.isEmpty(e)) {
      return;
    }
    onSubmit?.(toJS(line));
  };

  return (
    <Form
      labelAlign="top"
      fullWidth
      value={toJS(line)}
      onChange={handleChange}
    >
      <FormItem
        label={t`上车城市`}
        name="onCityId"
        required
        useLabelForErrorMessage
      >
        <TauSimpleSelect
          dataSource={fromCities}
          placeholder={t`请选择上车城市`}
        />
      </FormItem>
      <FormItem
        label={t`下车城市`}
        name="offCityId"
        required
        useLabelForErrorMessage
      >
        <TauSimpleSelect
          dataSource={toCities}
          placeholder={t`请选择下车城市`}
        />
      </FormItem>
      <FormItem
        label={t`上车站点`}
        name="onStationId"
        required
        useLabelForErrorMessage
      >
        <TauSimpleSelect
          dataSource={onStations}
          placeholder={t`请选择上车站点`}
        />
      </FormItem>
      <FormItem
        label={t`下车站点`}
        name="offStationId"
        required
        useLabelForErrorMessage
      >
        <TauSimpleSelect
          dataSource={offStations}
          placeholder={t`请选择下车站点`}
        />
      </FormItem>
      <FormItem
        label={t`班次列表`}
        name="schedule"
        required
        useLabelForErrorMessage
      >
        <Checkbox.Group>
          {schedule.map((p) => <Checkbox value={p}>{p}</Checkbox>)}
        </Checkbox.Group>
      </FormItem>
      <DrawerFooter>
        <FormItem>
          <Form.Submit validate type="primary" onClick={handleOnSubmit}>{t`保存`}</Form.Submit>
          <Button style={{ marginLeft: 8 }} onClick={onCancel}>{t`取消`}</Button>
        </FormItem>
      </DrawerFooter>
    </Form>
  );
}

export default observer(ChargeForm);
